<template>
  <div class="rank-bg">
    <div class="rank-star"></div>
    <blink-star
      :stars="[
        { left: '0.5rem', top: '0.8rem', type: '--yellow-square' },
        { right: '0.5rem', top: '0.8rem', type: '--yellow-square' },
        { left: '2.5rem', top: '0.4rem', type: '--yellow-square' },
        { left: '4.5rem', top: '0.5rem', type: '--cyan' },
        { left: '3.5rem', top: '1.8rem', type: '--yellow-bling' },
        { left: '3.8rem', top: '3.2rem', type: '--yellow-bling' },
      ]"
    />
    <shooting-star />
    <download-bar v-if="!isHeyHey" />
    <div class="container">
      <auto-height-block
        class="auto-height-warp"
        :top-bg="topBg"
        :middle-bg="middleBg"
        :bottom-bg="bottomBg"
      >
        <div class="explain" @click="gotoExplain"></div>
        <div class="btn-frind-wish" @click="gotorankwish"></div>
        <div class="rank-top_title"></div>
        <div class="rank-inform">
          <div class="rank-trumpet"></div>
          <span>{{ countdown }}</span>
        </div>
        <div class="rank-title"></div>
        <div class="rank-userinfocontainer">
          <div
            v-for="(item, index) in friendlist"
            :key="index"
            :class="`rank-userinfo rank-userinfo--${Number(index) + 1}`"
            @click="postOthersInfo(item)"
          >
            <!-- <div :class="`rank-usernum`" :style="rankNumStyle(index)"></div> -->
            <div :class="`rank-userwish`">
              <div class="rank-userwishname">{{ item.nick_name }}的愿望</div>
            </div>
            <div :class="`rank-userlove`">
              <div class="icon-love"></div>
              <div :class="`rank-userlovenum`">
                <span>{{ item.wish_like_num }}</span>
              </div>
            </div>
            <div :class="`rank-userprofile`">
              <img style="border-radius: 50%" :src="item.icon" alt="">
            </div>
            <div :class="`rank-userwishtext`">
              <span>{{ item.wish_name }}</span>
            </div>
            <div v-if="item.wish_name !== 'Ta还没有愿望，赶紧喊Ta去许愿吧～'" class="rank-turn"></div>
          </div>
        </div>
      </auto-height-block>
    </div>
    <van-action-sheet v-model:show="isShowInstruction" class="instructions">
      <rank-instruction />
    </van-action-sheet>
  </div>
</template>

<script>
import { useCountdown } from '@/lib/js/hooks'
import topBg from './images/rank/bg-rank-top.png'
import middleBg from './images/rank/bg-rank-repeat.png'
import bottomBg from './images/rank/bg-rank-bottom.png'
import RankInstruction from '../components/rank-instruction.vue'
export default {
  components: {
    RankInstruction
  },
  setup () {
    const [countdown, setCountdown] = useCountdown()
    return {
      countdown,
      setCountdown
    }
  },
  data () {
    return {
      alllist: [],
      rankInfo: {

      },
      topBg,
      middleBg,
      bottomBg,
      currentUserHeyId: '',
      isHeyHey: window.isHeyHeyTalk(),
      friendlist: [],
      isShowInstruction: false
    }
  },
  created () {
    this.getFriendlist()
    //this.getMyRank()
  },
  methods: {
    async getFriendlist () {
      const res = await this.$api.Friendlist.getFriendlist()
      const { result: { friend_rank_list: friendlist } } = res
      this.friendlist = [
        ...friendlist
      ]
      console.log(this.friendlist, '---friendlist')
    },
    rankNumStyle (index) {
      return {
        backgroundImage: `url(${process.env.PUBLIC_PATH}/static/images/timetravel/rank/${(index + 1)}.png)`
      }
    },

    // gotoOtherwish () {
    //   this.$router.push('./otherwish')
    // }
    async postOthersInfo (data) {
      if (data.wish_name === 'Ta还没有愿望，赶紧喊Ta去许愿吧～') {
        return
      }
      const { hey_id } = data
      const ids = data.hey_id
      this.$router.push({ name: 'otherwish', query: { heyId: hey_id, currentUserHeyId: this.currentUserHeyId } })
    },

    gotorankwish () {
      this.$router.replace({ name: 'rank' })
    },
    gotoExplain () {
      //this.$router.replace({ name: 'explain' })
      this.isShowInstruction = true
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .instructions{
  background-color: #000 ;
}
.rank-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("./images/rank/bg.png");
  background-size: 100% auto;
}

.rank-star {
  position: absolute;
  top: 0;
  left: 2%;
  width: 2.25rem;
  height: 1.17rem;
  background-image: url("./images/I_star.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: star1 3s infinite;
  @keyframes star1 {
    50% {
      top: -3%;
    }
    100% {
      top: 0%;
    }
  }
}

.container {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 2rem;
  width: 100%;
  .auto-height-warp {
    height: 100%;
    width: 100%;
    padding-top: 2.64rem;
    ::v-deep .auto-height-block__line-bg {
      top: 5.26rem;
      bottom: 6.55rem;
    }
  }

  .explain {
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    background-image: url("./images/rank/explain.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .btn-frind-wish {
    position: absolute;
    width: 1.58rem;
    height: 0.69rem;
    right: -0.1rem;
    top: 1.9rem;
    transform: rotate(7deg);
    background-image: url("./images/rank/wishrank.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .rank-top_title {
    position: absolute;
    top: 1rem;
    left: 50%;
    margin-left: -0.95rem;
    width: 1.9rem;
    height: 0.39rem;
    background-image: url("./images/rank/friendwishtoptitle.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .rank-userinfocontainer {
    position: absolute;
    left: 50%;
    margin-left: -2.82rem;
    width: 5.64rem;
    overflow-y: auto;
    overflow-x: hidden;
    top: 3.5rem;
    bottom: 1.9rem;
    .rank-userinfo {
      position: relative;
      width: 100%;
      height: 1.96rem;
      background-image: url("./images/rank/firstcontainer.png");
      background-size: 100% auto;
      // .rank-usernum {
      //   position: absolute;
      //   top: 9%;
      //   left: 5%;
      //   width: 0.67rem;
      //   height: 1.3rem;
      //   background-size: 100% auto;
      // }
      .rank-userwish {
        position: absolute;
        top: 15%;
        left: 8%;
        width: 2.81rem;
        height: 0.31rem;
        font-size: 12px;
        color: #fff;
        .rank-userwishname {
          @include ellipsis();
        }
      }
      .rank-userlove {
        position: absolute;
        top: 15%;
        left: 70%;
        width: 1.53rem;
        height: 0.31rem;
        .icon-love {
          position: absolute;
          top: 10%;
          left: 0;
          width: 0.26rem;
          height: 0.26rem;
          background-image: url("./images/rank/love.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
        }
        .rank-userlovenum {
          line-height: 0.28rem;
          margin-left: 0.3rem;
          width: 100%;
          height: 100%;
          font-size: 14px;
          color: #fff;
        }
      }
      .rank-userprofile {
        position: absolute;
        top: 35%;
        left: 10%;
        width: 0.9rem;
        height: 0.9rem;
        background-image: url("./images/rank/profilephoto.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
      .rank-userwishtext {
        position: absolute;
        top: 35%;
        left: 27%;
        width: 3.4rem;
        height: 1.1rem;
        background-image: url("./images/rank/input.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
        span {
          scrollbar-width: none;
          overflow-y: scroll;
          font-size: 12px;
          color: #fff;
          position: absolute;
          top: 17%;
          left: 12%;
          width: 2.7rem;
          height: 0.62rem;
        }
      }
      .rank-turn {
        position: absolute;
        top: 45%;
        left: 92%;
        width: 0.19rem;
        height: 0.36rem;
        background-image: url("./images/rank/turn.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
      }
    }
  }
  .rank-inform {
    position: relative;
    margin: 0 auto;
    width: 6rem;
    height: 0.35rem;
    font-size: 12px;
    color: #c2a8fd;
    display: flex;
    align-items: center;
    justify-content: center;
    .rank-trumpet {
      width: 0.27rem;
      height: 0.23rem;
      margin-right: 0.1rem;
      background-image: url("./images/rank/trumpet.png");
      background-size: 100% auto;
      background-repeat: no-repeat;
    }
  }
  .rank-title {
    margin: 0 auto;
    width: 3.81rem;
    height: 0.38rem;
    background-image: url("./images/rank/friendwishtitle.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-bottom: 0.24rem;
  }

  .rank-bottomcontainer {
    position: absolute;
    left: 9%;
    bottom: 0.55rem;
    width: 6.14rem;
    height: 1.06rem;
    background-image: url("./images/rank/bottomcontainer.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    .rank-bottomcontainer_profilephoto {
      position: absolute;
      top: 13%;
      left: 7.5%;
      width: 0.86rem;
      height: 0.86rem;
      background-image: url("./images/rank/profilephoto.png");
      background-size: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 85%;
        max-height: 85%;
        border-radius: 100%;
      }
    }
    .rank-bottomcontainer_ranking {
      position: absolute;
      top: 18%;
      left: 25%;
      font-size: 0.28rem;
      width: 3.22rem;
      height: 0.7rem;
      color: #442e90;
      .rank-bottomcontainer_ranking_bottom {
        height: 0.26rem;
        line-height: 0.26rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .rank-bottomcontainer_love {
          width: 0.29rem;
          height: 0.26rem;
          margin-right: 0.1rem;
          background-image: url("./images/rank/love.png");
          background-size: 100% auto;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>
